<template>
    <div class="user-manage">
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
            <div class="item-group">
                <el-form-item label="捐赠者ID:">
                    <el-input v-model="searchForm.donatorId" placeholder="请输入捐赠者ID" />
                </el-form-item>
                <el-form-item label="捐赠者名称:">
                    <el-input v-model="searchForm.donatorUsername" placeholder="请输入捐赠者名称" />
                </el-form-item>
                <el-form-item label="募捐项目ID:">
                    <el-input v-model="searchForm.fundraisingProjectsId" placeholder="请输入募捐项目ID" />
                </el-form-item>
                <el-form-item label="募捐项目名称:">
                    <el-input v-model="searchForm.fundraisingProjectsName" placeholder="请输入募捐项目名称" />
                </el-form-item>
            </div>
            <div class="btn-group">
                <el-button type="primary" @click="getCommentList" size="small">
                    <el-icon><Search /></el-icon>
                    搜索
                </el-button>
                <el-button type="danger" @click="handleDelete('batch')" size="small">
                    <el-icon><Minus /></el-icon>
                    批量删除
                </el-button>
            </div>
        </el-form>
        <!-- 表格数据 -->
        <el-table 
            :data="tableData" 
            style="width: 100%" 
            border 
            :header-cell-style="{ background: 'rgb(216,231,246)' }" 
            max-height="500"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="commentId" label="评论ID" />
            <el-table-column prop="donatorId" label="捐赠者ID" />
            <el-table-column prop="donatorUsername" label="捐赠者" />
            <el-table-column prop="fundraisingProjectsId" label="募捐项目ID" />
            <el-table-column prop="fundraisingProjectsName" label="募捐项目名称" />
            <el-table-column prop="commentTime" label="评论时间" :formatter="handleFormatDate" />
            <el-table-column prop="commentContent" label="评论内容" />
            <el-table-column label="操作" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" @click="handleDelete('single', row.commentId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next,jumper"
                :page-sizes="[10, 50, 100]"
                :total="total"
                v-model:page-size="pageSize"
                v-model:current-page="currentPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { adminApi } from '../../api/app';
import { Search, Minus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox, UploadProps } from 'element-plus';
import { handleFormatDate } from './ts/common';
  
/** 搜索表单 */
const searchForm = ref({
    donatorUsername: null,
    donatorId: null,
    fundraisingProjectsId: null,
    fundraisingProjectsName: null
})
/** 表格数据 */
const tableData = ref([])
/** 数据总数 */
const total = ref(0);
/** 当前页码 */
const currentPage = ref(1);
/** 每页显示条数 */
const pageSize = ref(10);
/** 多选选中内容 */
const selection = ref<any[]>([]);
  
// 初始加载
onMounted(() => {
    // 获取评论列表
    getCommentList();
});
  
/** 获取评论信息列表 */
const getCommentList = () => {
    adminApi.getComments({ pageNum: currentPage.value, pageSize: pageSize.value, ...searchForm.value }).then((res: any) => {
        if (res) {
            tableData.value = res.records;
            total.value = res.total;
        }
    });
};
  
/** 多选变化 */
const handleSelectionChange = (val: any) => {
    val.forEach((element: any) => selection.value.push(element.commentId));
};

/** 删除评论 */
const handleDelete = (control: string, commentId?: string) => {
    ElMessageBox.confirm('确定删除吗？', '注意', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const commentIds = control === 'single' ? [commentId] : selection.value;
        adminApi.deleteComments(commentIds).then(res => {
            if (res) {
                ElMessage.success('删除成功');
                getCommentList();
                // 批量删除清空选中内容
                if(control === 'batch') {
                    selection.value = [];
                }
            } else {
                ElMessage.error('删除失败');
            }
        });
    }).catch(() => {
        ElMessage.info('已取消');
    });
}
  
/** 表格分页大小改变 */
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getCommentList();
};
  
/** 表格页码改变 */
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    getCommentList();
};
</script>
  
<style scoped lang="less">
@import "./css/tableForm.less";
</style>